<template>
  <div class="container" :style="{background:bgcolor}">
    <scroll-view scroll-x
                 scroll-with-animation>
      <ul class="tab-list clearfix">
        <li class="list-item"
            v-for="(item, index) in tab_arr"
            :key="index"
            :class="{'active':item.active}"
            @tap="toggle_tab(item)">
          {{item.value}}
        </li>

      </ul>
    </scroll-view>

  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    toggle_tab (item) {
      let arr = [...this.tab_arr]
      arr.forEach(val => {
        if (val.id == item.id) {
          val.active = true
        } else {
          val.active = false
        }
      });
      this.tab_arr = arr
      this.$emit('toggle_tab', item)
    }
  },
  watch: {
    tab_arr (newVal, oldVal) {
    }
  },
  // props: ["tab_arr"]
   props: {
    tab_arr: {
      type: Array,
      default() {
        return [];
      }
    },
    //背景颜色
    bgcolor: {
      type: String,
      default: "#fff"
    }
  }
}
</script>


<style lang="less" scoped>
.container {
  height: 44px;
  line-height: 44px;
  padding-left: 15px;
  box-sizing: border-box;
  .tab-list {
    display: flex;
    white-space: nowrap;
    .list-item {
      margin:  0;
      font-size: 16px;
      font-family: "PingFang SC";
      font-weight: normal;
      color: rgba(51, 51, 51, 1);
      vertical-align: middle;
      margin-right: 20px;
      display: inline-block;
      &.active {
        position: relative;
        font-weight: bold;
        background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0/indexpage/rectangle@3x.png);
        background-repeat: no-repeat;
        background-size: 100% 5px;
        background-position: center 70%;
      }
    }
  }
}
</style>


